<template>
  <div>
    <!-- 导航栏 -->
    <userTopMenu></userTopMenu>

    <!-- 个人中心 -->
    <article class="resume-wrapper text-center position-relative">
      <div class="resume-wrapper-inner mx-auto text-start bg-white shadow-lg">
        <!-- 用户信息 -->
        <header class="resume-header pt-4 pt-md-0">
          <div class="row">
            <div
              class="col-block col-md-auto resume-picture-holder text-center text-md-start"
            >
              <img class="picture" :src="userImg" alt="" />
            </div>
            <div class="col">
              <div
                class="row p-4 justify-content-center justify-content-md-between"
              >
                <div class="primary-info col-auto">
                  <h1
                    class="name mt-0 mb-1 text-white text-uppercase text-uppercase"
                  >
                    {{ users.userName }}
                  </h1>
                  <div class="title mb-3">来自 {{ users.userAddr }}</div>
                  <ul class="list-unstyled">
                    <li>
                      <i class="el-icon-phone" data-fa-transform="grow-6"></i>
                      电话：{{ users.userTelephone }}
                    </li>
                    <li v-if="flag.role1">
                      <i class="el-icon-user" data-fa-transform="grow-6"></i
                      >会员等级：大众会员
                    </li>
                    <li v-if="flag.role2">
                      <i class="el-icon-user" data-fa-transform="grow-6"></i
                      >会员等级：金冠会员
                    </li>
                    <li>
                      <i class="el-icon-scissors" data-fa-transform="grow-6"></i
                      >剩余折扣次数：{{ users.discountTimes }}次
                    </li>
                  </ul>
                </div>
                <div class="secondary-info col-auto mt-2">
                  个性签名：以清心待世界，以宽厚待人心
                  <div style="margin-top: 30%; margin-left: 50%; display: flex">
                    <el-button
                      class="primary"
                      size="medium"
                      @click="becomeAMember()"
                      >成为会员</el-button
                    >
                    <el-button
                      class="primary"
                      size="medium"
                      @click="drawerOpen()"
                      >修改信息</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </header>
        <!-- 主体 -->
        <div class="resume-body p-5">
          <section class="resume-section summary-section mb-5">
            <h2
              class="resume-section-title text-uppercase font-weight-bold pb-3 mb-3"
              style="font-size: 30px"
            >
              常用服务
            </h2>
            <!-- 按钮 -->
            <div class="btnBox">
              <div>
                <el-button
                  type="primary"
                  style="margin-right: 100px"
                  @click="myOrders()"
                  >我的订单</el-button
                >
                <el-button type="primary" @click="myComments()"
                  >我的评论</el-button
                >
              </div>
              <div>
                <el-button
                  type="primary"
                  style="margin-right: 100px"
                  @click="lmsNearby()"
                  >附近景区</el-button
                >
                <el-button type="primary" @click="hotelsNearby()"
                  >附近酒店</el-button
                >
              </div>
            </div>
            <hr />

            <!-- 我的评论 -->
            <div v-if="flag.comments">
              <h2
                class="resume-section-title text-uppercase font-weight-bold pb-3 mb-3"
                style="font-size: 30px"
              >
                近期点评
              </h2>
              <div style="margin: 20px">
                <commentlists></commentlists>
              </div>
              <hr />
            </div>

            <!-- 我的订单 -->
            <div v-if="flag.orders">
              <h2
                class="resume-section-title text-uppercase font-weight-bold pb-3 mb-3"
                style="font-size: 30px"
              >
                我的订单
              </h2>
              <div style="margin: 20px">
                <myOrderLists></myOrderLists>
              </div>
              <hr />
            </div>

            <!-- 附近景区 -->
            <div v-if="flag.lms">
              <h2
                class="resume-section-title text-uppercase font-weight-bold pb-3 mb-3"
                style="font-size: 30px"
              >
                附近景区
              </h2>
              <div style="margin: 20px">
                <landmarkcards :cardlist="cardlist"></landmarkcards>
              </div>
              <hr />
            </div>

            <!-- 附近酒店 -->
            <div v-if="flag.hotels">
              <h2
                class="resume-section-title text-uppercase font-weight-bold pb-3 mb-3"
                style="font-size: 30px"
              >
                附近酒店
              </h2>
              <div style="margin: 20px">
                <hotelcards :cardlist="cardlist"></hotelcards>
              </div>
              <hr />
            </div>
          </section>
        </div>
      </div>
    </article>

    <!-- 用户表单 -->
    <el-drawer
      title="用户信息"
      :before-close="handleCloseUserForm"
      :visible.sync="drawer"
      direction="ltr"
      custom-class="demo-drawer"
      ref="drawer"
      size="50%"
    >
      <div class="demo-drawer__content">
        <el-form :model="users">
          <el-form-item label="用户头像" :label-width="formLabelWidth">
            <div>
              <div class="img" style="margin-bottom: 30px">
                <img :src="userImg" alt="用户头像" />
              </div>
              <!-- 修改头像 -->
              <el-button @click="innerDrawer = true">修改头像</el-button>
              <el-drawer
                title="头像列表"
                direction="ltr"
                :append-to-body="true"
                :before-close="handleCloseImgForm"
                :visible.sync="innerDrawer"
              >
                <userimgform></userimgform>
              </el-drawer>
            </div>
          </el-form-item>

          <el-form-item label="昵称" :label-width="formLabelWidth">
            <el-input v-model="users.userName" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="账号" :label-width="formLabelWidth">
            <p>{{ users.userAccount }}</p>
          </el-form-item>

          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input
              v-model="users.password"
              autocomplete="off"
              type="password"
            ></el-input>
          </el-form-item>

          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input
              v-model="users.userTelephone"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input
              v-model="users.userAddr"
              autocomplete="off"
              style="margin-bottom: 30px"
            ></el-input>
            <!-- <el-button size="medium">通过地图修改</el-button> -->
          </el-form-item>

          <el-form-item label="注册时间" :label-width="formLabelWidth">
            <p>{{ maps.registerTime }}</p>
          </el-form-item>

          <el-form-item label="最近登录时间" :label-width="formLabelWidth">
            <p>{{ maps.latestLoginTime }}</p>
          </el-form-item>
        </el-form>

        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button
            type="primary"
            @click="$refs.drawer.closeDrawer()"
            :loading="loading"
            >{{ loading ? "提交中 ..." : "确 定" }}</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import userTopMenu from "@/components/menu/userTopMenu.vue";
import commentlists from "@/components/lists/commentLists.vue";
import myOrderLists from "@/components/lists/myOrderLists.vue";
import landmarkcards from "@/components/cards/landmarkCards.vue";
import hotelcards from "@/components/cards/hotelCards.vue";
import userimgform from "@/components/forms/userImgForm.vue";
export default {
  name: "user",
  components: {
    userTopMenu,
    commentlists,
    myOrderLists,
    landmarkcards,
    hotelcards,
    userimgform,
  },
  data() {
    return {
      users: {},
      oldUserInfo: {}, //用户原始信息，包含users+pictures
      userImg: "",
      maps: {},
      //   其他参数
      flag: {
        role1: true,
        role2: false,
        comments: true,
        orders: false,
        lms: false,
        hotels: false,
      },
      // 子组件传参
      cardlist: { page: 1, size: 6, city: "" },
      // form
      dialog: false,
      loading: false,
      formLabelWidth: "80px",
      timer: null,
      drawer: false,
      innerDrawer: false,
    };
  },
  methods: {
    // 获取用户信息
    queryUserById() {
      this.$api.usersApi
        .queryUserById({ userId: localStorage.getItem("USERID") })
        .then((res) => {
          this.users = res.data.data;
          // 城市参数设置
          this.cardlist.city = res.data.map.city;
          this.maps = res.data.map;
        });
    },
    // 获取用户头像
    getUserImg() {
      this.$api.picturesApi
        .getUserImg({ userId: localStorage.getItem("USERID") })
        .then((res) => {
          this.userImg = res.data.data;
        });
    },
    // 成为会员
    becomeAMember() {
      this.$api.usersApi.becomeAMember(this.users).then((res) => {
        this.users = res.data.data;
        alert("恭喜您成为金冠会员！");
      });
    },
    // 身份变化
    roleChange() {
      if (this.users.discountTimes == 0) {
        this.flag.role1 = true;
        this.flag.role2 = false;
      } else {
        this.flag.role1 = false;
        this.flag.role2 = true;
      }
    },
    // 我的订单
    myOrders() {
      this.flag.orders = true;
      this.flag.comments = false;
      this.flag.lms = false;
      this.flag.hotels = false;
    },
    // 我的评论
    myComments() {
      this.flag.comments = true;
      this.flag.orders = false;
      this.flag.lms = false;
      this.flag.hotels = false;
    },
    // 附近景区
    lmsNearby() {
      this.flag.lms = true;
      this.flag.comments = false;
      this.flag.orders = false;
      this.flag.hotels = false;
    },
    // 附近酒店
    hotelsNearby() {
      this.flag.hotels = true;
      this.flag.lms = false;
      this.flag.comments = false;
      this.flag.orders = false;
    },

    // 用户表单
    // 打开抽屉
    drawerOpen() {
      this.drawer = true;
      this.storageOldUser();
    },

    // 存储用户原始信息到前端
    storageOldUser() {
      console.log("storageOldUser");
      this.$api.usersApi
        .storageOldUser({ userId: localStorage.getItem("USERID") })
        .then((res) => {
          this.oldUserInfo = res.data.data;
        });
    },

    // 修改用户数据
    handleCloseUserForm(done) {
      if (this.loading) {
        return;
      }
      this.$confirm("确定要提交表单吗？")
        .then((_) => {
          // 提交表单
          this.$api.usersApi.updateUserInfo(this.users).then((res) => {
            // 修改成功，重新渲染数据
            if (res.data.code == 1) {
              this.$notify({
                title: "成功",
                message: "用户信息修改成功！",
                type: "success",
              });
              this.users = res.data.data;
              this.queryUserById();
            } else {
              this.$notify.error({
                title: "错误",
                message: "用户信息修改失败！",
              });
            }
          });
          // 关闭抽屉
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);
        })
        .catch((_) => {});
    },

    // 取消表单提交
    cancelForm() {
      //还原--调用update，所以提交和取消表单都进行了数据修改，但是一个是修改为新值，一个是还原旧值
      console.log("cancelForm");
      //基础信息回退
      this.$api.usersApi.updateUserInfo(this.oldUserInfo.users).then((res) => {
        if (res.data.code == 1) {
          this.$notify({
            title: "成功",
            message: "用户信息取消修改成功",
            type: "success",
          });
          this.queryUserById();
        } else {
          this.$notify.error({
            title: "错误",
            message: "用户信息取消修改失败！",
          });
        }
      });
      //头像回退
      this.$api.usersApi
        .updateUserImg({ picId: this.oldUserInfo.pictures.picId, userId: this.oldUserInfo.users.userId })
        .then((res) => {
          if (res.data.code == 1) {
            this.$notify({
              title: "成功",
              message: "头像修改成功！",
              type: "success",
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: "头像修改失败！",
            });
          }
        });

      //关闭窗口
      this.loading = false;
      this.drawer = false;
      clearTimeout(this.timer);
    },

    // 用户头像
    handleCloseImgForm(done) {
      this.$confirm("头像选择完毕？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },

  mounted() {
    this.queryUserById();
    this.getUserImg();
  },
  updated() {
    this.roleChange();
  },
};
</script>

<style scoped>
@import url("../../assets/css/users/css/pillar-1.css");
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");

.hf {
  display: flex;
  justify-content: flex-end;
}

.img {
  width: 286.4px;
  height: 243px;
}

.inimg {
  margin: 80px;
}

img {
  width: 100%;
  height: auto;
}

ul li {
  margin-top: 15px;
}

.btnBox {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
  margin-bottom: 30px;
}
</style>
